<div
  class="st-accordion"
  data-controller='accordion'
  data-accordion-close-others-value="false">
  <%= link_to "#price_filter", class: "cursor-pointer uppercase flex items-center justify-between h-10 px-4 lg:px-10 text-sm tracking-widest focus:outline-hidden transition duration-150 ease-in-out #{'st-accordion__icon--opened' if params.dig(:filter, :min_price).present? || params.dig(:filter, :max_price).present?}", data: { action: 'accordion#toggle:prevent' } do %>
    <%=Spree.t(:price) %>
    <%= render 'spree/shared/icons/chevron_down' %>
  <% end %>
  <% min_price_value = [params.dig(:filter, :min_price).presence&.to_f, filter_price_range[:min].floor].compact.max %>
  <% max_price_value = [params.dig(:filter, :max_price).presence&.to_f, filter_price_range[:max].ceil].compact.min %>
  <div
    class='st-accordion__content flex flex-col gap-2'
    data-accordion-id='price_filter'
    data-controller="no-ui-slider"
    data-no-ui-slider-start-value="[<%= min_price_value %>, <%= max_price_value %>]"
    data-no-ui-slider-range-value="[<%= filter_price_range[:min].floor %>,<%= filter_price_range[:max].ceil %>]">
    <div class="flex justify-between gap-6 px-4 lg:px-10 lg:text-sm">
      <div class="relative w-1/2">
        <%= f.number_field filter_price_range[:min].floor, class: "pl-16 text-right without-arrows w-full peer focus:border-primary focus:ring-primary", inputmode: "numeric", name: "filter[min_price]", data: { no_ui_slider_target: "minInput" }, id: "price_from", value: params.dig(:filter, :min_price).present? ? min_price_value.to_i : nil, placeholder: filter_price_range[:min].floor %>
        <label class="absolute left-0 top-0 flex pl-3 items-center h-full text-input-text peer-placeholder-shown:opacity-50" for="price_from">
          <%= Spree.t(:from) %> <%= currency_symbol(current_currency) %>
        </label>
      </div>
      <div class="relative w-1/2">
        <%= f.number_field filter_price_range[:max].ceil, class: "pl-[2.75rem] text-right without-arrows w-full peer focus:border-primary focus:ring-primary", placeholder: filter_price_range[:max].ceil, inputmode: "numeric", name: "filter[max_price]", data: { no_ui_slider_target: "maxInput" }, id: "price_to", value: params.dig(:filter, :max_price).present? ? max_price_value.to_i : nil %>
        <label class="absolute left-0 top-0 flex pl-3 items-center h-full text-input-text peer-placeholder-shown:opacity-50" for="price_to">
          <%= Spree.t(:to) %> <%= currency_symbol(current_currency) %>
        </label>
      </div>
    </div>
    <div class="px-4 lg:px-10 mt-[11px] h-[10px]">
      <div data-no-ui-slider-target="slider"></div>
    </div>
  </div>
</div>
